import { defineComponent } from "vue";
import Module from "./components/Module";

import * as echarts from "echarts/core";
import { GridComponent, TitleComponent } from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition, TitleComponent]);

const option = {
	title: {
		text: "设备告警趋势",
		textStyle: {
			color: "#fff",
			fontSize: 12
		}
	},
	xAxis: {
		type: "category",
		boundaryGap: false,
		data: ["0:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
		axisTick: {
			show: false
		},
		axisLine: {
			show: false
		},
		axisLabel: {
			color: "#7FA5F1"
		}
	},
	yAxis: {
		type: "value",
		axisLabel: {
			color: "#fff"
		},
		splitLine: {
			lineStyle: {
				type: "dashed",
				color: "#314165",
				opacity: 0.5
			}
		}
	},
	axisLabel: { show: false },
	grid: {
		left: "30px",
		top: "20%",
		right: "5%",
		bottom: "15%"
	},
	series: [
		{
			data: [20, 32, 21, 34, 40, 30, 20],
			type: "line",
			smooth: true,
			lineStyle: {
				color: "#FFA011",
				width: 3
			},
			itemStyle: {
				opacity: 0
			},
			areaStyle: {
				color: {
					type: "linear",
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: "#FFA011" // 0% 处的颜色
						},
						{
							offset: 1,
							color: "#FFA01100" //1% 处的颜色
						}
					],
					global: false // 缺省为 false
				}
			}
		}
	]
};
export default defineComponent({
	name: "DeviceTrend",
	setup() {
		const echartDom = ref();
		onMounted(() => {
			setTimeout(() => {
				const chart = echarts.init(echartDom.value);
				chart.setOption(option);
				window.addEventListener("resize", () => chart.resize());
			}, 500);
		});
		return () => (
			<Module title={"设备趋势"}>
				<div class={"w-full h-full flex flex-col "}>
					<div class={"flex flex-row"}>
						{[
							{ title: "故障设备", value: "1365" },
							{ title: "告警设备", value: "36852" }
						].map(e => (
							<div class={"flex flex-col mr-[25%]"}>
								<div class={"text-[13px] leading-[13px] mb-2"}>{e.title}</div>
								<div class={"flex flex-row justify-start items-center"}>
									<div class={"text-[#FFCC62] text-[22px] leading-[20px]"}>{e.value}</div>
									<div class={"text-[13px] leading-[13px]"}>台</div>
								</div>
							</div>
						))}
					</div>
					<div class={"devider h-[2px] w-full bg-[#262E61] my-4"}></div>
					<div class="w-full h-full " ref={echartDom}></div>
				</div>
			</Module>
		);
	}
});
